<script setup>
import CardHonor from '../components/CardHonor.vue';
import Temp from '../components/Temp.vue';

const props =  defineProps({
    msg: {
        type: String,
        required: true
    },
    data: {
        type: Object,
        required: false,
        default (){
        return [
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor1.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor2.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor3.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor4.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor5.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor6.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor1.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor2.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor3.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor4.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor5.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor6.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor1.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor2.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor3.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor4.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor5.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor6.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor1.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor2.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor3.jpg'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor4.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor5.png'},
            {title: '特种设备制造许可证', url: '/',image:'/src/assets/honor6.png'},
        ]
        }
    },
    typelist: {
        type: Object,
        required: false,
        default(){
            return [
                {id:1, title:'证书类别证书类别'},
                {id:2, title:'证书类别证书类别 '},
                {id:3, title:'证书类别证书类别'},
            ]
        }
    }
})
</script>

<template>
    <Temp lit=[]>
        <div class="w-full container mx-auto pt-24 mobile:px-6 mobile:pt-20">
            <div class="w-full h-auto self-center bg-no-repeat ">
                <div class="flex mb-[80px] mobile:mb-2">
                    <span class="wen-index-title">资质证书</span>
                </div>
                <div class="w-full flex">
                    <div class="w-1/5 pr-16 mobile:w-full mobile:wen-fixed-bc-full mobile:hidden">
                        <ul role="list" class="relative z-10 bg-white mobile:flex sideline mobile:bg-undercolor2 wow animate__animated animate__fadeInUp timing">
                            <li v-for="(item, index) in typelist" :key="index" class="w-full py-8 text-underint flex items-center text-xl hover:text-dominant mobile:text-sm mobile:p-2 mobile:mx-3" :class="{active:index==1}">
                                <span class="fa fa-circle-thin -translate-x-2 shorte-line"></span>&nbsp;
                                <a :href="item.id" class="flex-auto" >{{ item.title }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="w-4/5 flex-atuo mobile:w-full" >
                        <div class="w-full">
                            <div class="w-full wow animate__animated animate__pushOnRight timing" data-wow-duration="0.5s" data-wow-delay="0.5s" v-for="(item, index) in typelist" :key="index">
                                <div class="w-full relative">
                                    <div class="inline-block py-6 text-dominant text-3xl font-bold mobile:py-4 mobile:text-xl">{{ typelist[0].title }}</div>
                                </div>
                                <div class="w-full grid grid-cols-3 justify-items-center mb-24 mobile:mb-6 mobile:grid-cols-2">
                                    <CardHonor v-for="(item2, index2) in data" :key="index2" :data="item2"></CardHonor>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Temp>
</template>
<style scoped>
ul.grid li.active{
  border-color: #2F3767;
  color: #2F3767
}
.mask::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #2F3767cc;
    pointer-events: none;
}
.wen-tcel{
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 66% 100%, 18% 0, 27% 0, 75% 100%, 26% 100%, 6% 100%, 100% 100%, 51% 0);
    clip-path: polygon(0% 0%, 0% 100%, 66% 100%, 18% 0, 27% 0, 75% 100%, 26% 100%, 6% 100%, 100% 100%, 51% 0);
}

.sideline::before{
    content: '';
    width: 2px;
    height: 66%;
    display: block;
    position: absolute;
    left: 0;
    top:16.66%;
    background-color: #2F3767;
}

.shorte-line::before{
    background-color: white;
    border-radius: 2em;
}
.active .shorte-line::before{
    background-color: #2F3767;
}
.active{
    color: #2F3767;
}
</style>